<template>
	<view class="container flex flex-direction">
		<zx-nav title="我的推广金" color="#fff"></zx-nav>
		<view class="flex-sub">
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false">
				<view class="info">
					<view class="title">当前推广金</view>
					<view class="num">{{ freshbean }}</view>
					<navigator class="description" url="/pages/article/details?id=5">规则说明</navigator>
				</view>
				<view class="box">
					<view class="cu-list flex align-center no-border">
						<view class="cu-item flex-sub" v-for="(item, index) in iconList" :key="index" @tap="handextra(item)">
							<view class="imgbox"><image :src="item.img" mode="widthFix"></image></view>
							<view class="anction">{{ item.name }}</view>
						</view>
					</view>
				</view>
				<view class="box">
					<view class="flex justify-between item"><view class="title">推广金收支明细</view></view>
					<view class="list">
						<view class="flex justify-between item" v-for="(item, index) in freshbeanList" :key="index">
							<view class="title">
								<view>推广金{{ item.type == 2 ? '支出' : '收入' }}</view>
								<view class="time">{{ item.created_at || '' }}</view>
							</view>
							<view class="action" :class="{ 'u-primary': item.type != 2 }">{{ item.type == 2 ? '-' : '+' }}{{ item.fresh_bean }}</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			iconList: [
				{
					img: '/static/freshbean/invite.png',
					name: '邀请好友赚推广金',
					url: '/pages/freshBean/invite'
				},
				{
					img: '/static/freshbean/transform.png',
					name: '推广金转化为余额',
					url: '/pages/freshBean/freshBeanTransform'
				}
			],
			freshbeanList: []
		};
	},
	computed: {
		...mapState(['userInfo']),
		freshbean() {
			return this.userInfo.fresh_bean || 0;
		}
	},
	onShow() {},
	methods: {
		//加载更多
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		upCallback(mescroll) {
			this.getfreshbean();
		},
		//获取余额明细列表
		getfreshbean() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize
			};
			let $me = this;
			this.$postAction(this.$api.getfreshbean, param).then(da => {
				if (da.data && da.data.length > 0) {
					let curPageData = da.data;
					$me.mescroll.endBySize(curPageData.length, da.count);
					if ($me.mescroll.num == 1) $me.freshbeanList = []; //如果是第一页需手动制空列表
					$me.freshbeanList = $me.freshbeanList.concat(curPageData); //追加新数据
				} else {
					$me.freshbeanList = [];
					$me.mescroll.endSuccess(0, false);
				}
			});
		},

		handextra(item) {
			uni.navigateTo({
				url: item.url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	background: linear-gradient(180deg, #ff8173 0%, #ff3543 100%);
	position: relative;
	.info {
		text-align: center;
		padding: 43upx 0 50upx;
		font-size: 30upx;
		color: #fff;
		position: relative;
		.title {
			font-size: 26upx;
		}

		.num {
			margin-top: 10upx;
			color: #fff;
			font-size: 60upx;
			font-weight: bold;
			line-height: 84upx;
		}

		.description {
			position: absolute;
			top: 20upx;
			right: 28upx;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 30upx;
			font-size: 22upx;
			color: #ff3c47;
			padding: 8upx 18upx;
		}
	}
}
.box {
	margin: 0 28upx 30upx;
	padding: 0;
	background: #fff;
	border-radius: 12rpx;
	.cu-list {
		margin: 30upx;
		border-radius: 30rpx;
		padding: 42rpx 0 25rpx;

		.imgbox {
			height: 80upx;
			width: 80upx;
			margin: 0 auto 20upx;

			image {
				height: 82upx;
				width: 82upx;
				display: block;
			}
		}
		.anction {
			width: 126upx;
			margin: 0 auto;
			font-size: 26upx;
			color: #1c1c1e;
			line-height: 37upx;
		}
	}

	.item {
		line-height: 93upx;
		border-bottom: 1px solid #f0f0f0;
		font-size: 32upx;
		padding: 0 10upx;
		margin: 0 22upx;
		color: #1c1c1e;
	}

	.list {
		.title {
			color: #636366;
			font-size: 28upx;
		}
		.time {
			font-size: 24upx;
		}
	}
}
</style>
